<div class="questionnaire">
    <script type="text/x-dot-template" id="addrInfoTemp">
        <input type="hidden" id="paperId" value="{{=it.paperId}}">
        {{~it.groups:group:index}}
        <div class="box-panel  group" {{?index!=0}} style="display: none" {{?}}>
            <div class="groupTitle"><p>{{=group.questionGroup.name}}</p>
                <p>当前第{{=(index+1)}}/{{=it.groups.length}}组</p></div>
            <div class="questionAndChoice">
                <ul>
                    {{~group.questions:question:i}}
                    <li class="questionLi">
                        <p class="question" data-val="{{=question.id}}">{{=(i+1)}}、{{=question.title}}</p>
                        <p class="choice selected" data-val="0">满意</p>
                        <p class="choice unSelect" data-val="1">较满意</p>
                        <p class="choice unSelect" data-val="2">不满意</p>
                        <textarea class='mark' cols='30' rows='3' placeholder="意见反馈"></textarea>
                    </li>
                    {{~}}
                </ul>
            </div>
            {{?index==0}}
            <div class="buts"><p onclick="goNext(this)">下一步</p></div>
            {{?}}
            {{?index>0 && index < (it.groups.length)}}
            <div class="buts">
                <div class="but"><p onclick="goPre(this)">上一步</p></div>
                <div class="but"><p onclick="goNext(this)">下一步</p></div>
            </div>
            {{?}}


        </div>
        {{~}}
        <div class="box-panel  group"  style="display: none" >
            <div class="otherSuggest"><textarea id="remark" cols='30' rows='5' placeholder="其他方面意见建议"></textarea></div>
            <div class="buts">
                <div class="but"><p onclick="goPre(this)">上一步</p></div>
                <div class="but"><p onclick="submitB(this)">提交</p></div>
            </div>
        </div>
    </script>
</div>
<div id="subOk" style="display: none;">
    <div class="box-panel">
        <p style="text-align: center;    line-height: 80px;">提交成功,谢谢您的意见建议！</p>
        <p style="text-align: center;font-size: 12px;color: #999">国投物业北京三分公司</p>
        <div class="buts"><p onclick="javascript:window.location.href='/'">返回首页</p></div>
    </div>

</div>
<div class="ypfood-head">
    <div class="back-div" onClick="javascript :window.location.href='/'">
        <img src="/statics/imgs/head-back.png?v=${params.ver}">
    </div>
    <div>
        <span class="title-span" id="paperName">客户意见调查表</span>
    </div>
</div>
<script>
    function goPre(btn) {
        $(btn).parents(".group").css("display", "none").prev().css("display", "");
        window.scroll(0, 0)
    }
    function goNext(btn) {
        window.scroll(0, 0)
        $(btn).parents(".group").css("display", "none").next().css("display", "");
    }
    function submitB(btn) {
        if ($(btn).html() == "提交中") {
            return false;
        }
        var answers = getAnswers();
        var params = {};

        params.paperId = $("#paperId").val();
        params.answers = JSON.stringify(answers);
        params.remark = $("#remark").val();
        $(btn).html("提交中");
        json("/option/submitPaper.jspa", params, function (data) {
            if (data.code == 0) {
                $(".questionnaire").css("display", "none");
                $("#subOk").css("display", "");
            } else {
                layer.open({content: data.description, time: 2});
                $(btn).html("提交");
            }
        });
    }
    function getAnswers() {
        var as = [];
        $.each($(".questionLi"), function (index, li) {
            var a = {
                questionId: $(li).find(".question").attr("data-val"),
                answer: $(li).find(".selected").attr("data-val"),
                mark: $(li).find(".mark").val()
            };
            as.push(a);
        });
        console.log(as);
        return as;
    }
    json("/option/getPaper.jspa", {id: '${param.paperId}'}, function (data) {
        if (data.code == 0) {
            $("#paperName").html(data.paperName);
            $(".questionnaire").html(doT.template($("#addrInfoTemp").html())(data));
            $(function () {
                $(".choice").bind("click", function () {
                    $(this).parent().find(".choice").removeClass("selected").addClass("unSelect");
                    $(this).addClass("selected").removeClass("unSelect")
                });
            });
        } else {
            layer.open({content: data.description, time: 2});
        }
    });

</script>















